<template>
  <div>完全将{{ content }}</div>
  <div v-text="text"></div>
  <div v-html="html"></div>
</template>

<script setup>
  import { ref } from 'vue';
  // Mustache插值语法，也可以实现在标签体中插入内容，较v-text更加灵活
  let content = ref("Hello Vue")
  // v-text: 文本内容原样展示，不会解析html标签
  let text = ref("<font color='red'>Hello Vue3</font>")
  // v-html: 会解析html标签。但是，存在安全问题，不建议使用
  let html = ref("<font color='red'>Hello Vue3</font>")
</script>

<style scoped></style>